<template>
	<view class="content">
		<view class="title">
			<image
				class="bg"
				:src="treeHole.imgUrl"
				mode="aspectFill"
			>
			</image>
			
			<view class="titleContent">
				<view class="funBtn" >
					<view class="back">
						<uni-icons type="arrow-left" size="27" color="black" @click="back()"></uni-icons>
					</view>
					<view class="share">
						<uni-icons type="upload" size="27" color="black" @click="share()"></uni-icons>
					</view>
					<view class="report">
						<uni-icons type="info" size="27" color="black" @click="report()"></uni-icons>
					</view>
				</view>
				<view class="titleImgs">
					<image 
						class="titleImg" 
						:src="treeHole.imgUrl"
						mode="aspectFill"
						@click="toPerson()"
					></image>
					<view>
						<text class="name">
							{{treeHole.authorName}}
						</text>
					</view>
				</view>
				
			</view>
			
		</view>
		
		<view class="journalTitle">
			<text>{{treeHole.title}}</text>
		</view>
		
		<view class="midContent">
			<view class="journalContent">
				<rich-text :nodes="treeHole.content	" style="text-align: center; padding-top: 5vh;"></rich-text>
			</view>
			<view class="date">
				{{treeHole.creatTime}}
			</view>
		</view>
		<view class="bottomBtn">
			<view class="leftBtn" @click="like()">
				<uni-icons type="heart" size="20" :color="isLike" class="icon" >
					{{treeHole.likeCounts}}
				</uni-icons>
			</view>
			<view class="midBtn" @click="message()">
				<uni-icons type="chatboxes" size="20" color="#7b7b7b" class="icon">
					留言 {{treeHole.commentCount}}
				</uni-icons>
	
			</view>
			<view class="rightBtn" @click="next()" v-if="isShow">
				<uni-icons type="paperplane" size="20" color="#7b7b7b" class="icon"></uni-icons>
				<text class="next">下一站</text>
			</view>
		</view>
		
		<view>
			<!-- 分享 -->
			<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
					<uni-popup-share></uni-popup-share>
				</uni-popup>
		</view>
	</view>
</template>

<script>
	import {roam,isLike,userLike,treeHoldCar} from '@/api/treeHole.js';
	export default {
		data() {
			return {
				isLike:"",
				id:"",
				token:"",
				treeHole:{
					authorId: "",
					authorName:"",
					commentCount:"", 
					content:"",
					imgUrl:"",
					likeCounts:"",
					title:"",
					treeHoleId:"",
					creatTime:"",
				},
				treeHoldId:"",
				isShow:true
				
			};
		},
		onLoad(options) {
			this.getMessage()
			this.treeHoldId = options.treeHoldId
			console.log(this.treeHoldId)
			if(this.treeHoldId!=null&&this.treeHoldId!=''){
				this.getTreeHoldDetail()
				this.isShow=false
			}else{
				this.getData()
				this.isShow=true
			}
			
			
		},
		methods:{
			//这个是用户点击详情进入-不是通过漫游进入
			getTreeHoldDetail(){
				treeHoldCar({
					"treeHoldId":this.treeHoldId,
					"token":this.token
				}).then(res=>{
					this.treeHole = res.data.data
					this.treeHole.treeHoleId = res.data.data.treeHoleId
					isLike({
						"userId":this.id,
						"treeHoleId":res.data.data.treeHoleId,
						"token":this.token
					}).then(res=>{
						if(res.data.data==1){
							this.isLike = "red"
						}else{
							this.isLike = ""
						}
					})
				})
			},
			getMessage(){
				this.id=uni.getStorageSync("id"),
				this.token=uni.getStorageSync("authorization")
			},
			userChickLike(){
				userLike({
					"userId":this.id,
					"treeHoldId":this.treeHole.treeHoleId,
					"token":this.token
				}).then(res=>{
					console.log(res)
				})
			},
			getData(){
				roam({
					"userId":this.id,
					"token":this.token
				}).then(res=>{
					this.treeHole = res.data.data
					this.treeHole.treeHoleId = res.data.data.treeHoleId
					isLike({
						"userId":this.id,
						"treeHoleId":res.data.data.treeHoleId,
						"token":this.token
					}).then(res=>{
						if(res.data.data==1){
							this.isLike = "red"
						}else{
							this.isLike = ""
						}
					})
				})
			},
			back(){
				uni.navigateTo({
					url:"/pages/treeHold/treeHold"
				})
			},
			share(){
				console.log("分享")
				this.$refs.share.open()
			},
			report(){
				console.log("举报")
			},
			like(){
				
				if(this.isLike == "red"){
					this.isLike = "",
					this.treeHole.likeCounts -= 1
				}else{
					this.isLike = "red",
					this.treeHole.likeCounts += 1
				}
				this.userChickLike()
				console.log("喜欢")
			},
			message(){
				console.log("留言")
				uni.navigateTo({
					url:"/pages/treeHold/MessageBoard?treeHoldId="+this.treeHole.treeHoleId
				})
			},
			next(){
				console.log("下一站")
				this.getData()
			},
			toPerson(){
				uni.navigateTo({
					url:"/pages/treeHold/personalCenter"
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $bg-gary;
	}
	.content{
		.bg{
			position:absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 30vh;
			background-repeat: no-repeat;
			background-size: cover;
			filter: blur(3px);
			pointer-events: none;
			opacity: 0.8;
			
		}
		.bg::after {
		    display: block;
		    background: rgba(0, 0, 0, 0.5);
		  
		}
		.titleContent{
			text-align: center;
			width: 100%;
			height: 30vh;
			z-index: 200;
			.funBtn{
				display: flex;
				z-index: 100;
				padding: 1vh;
				.back{
					
					justify-content: flex-start;
					display: flex;
					
				}
				.share{
					flex:1;
					justify-content: flex-end;
					display: flex;
				}
			}
			.titleImgs{
				.titleImg{
					width: 12vh;
					height: 12vh;
					border-radius: 12vh;
				}
				view{
					.name{
						color: black;
						font-size: 3vh;
					}
				}
			}
		}
		.journalTitle{
			width: 90%;
			height: 10vh;
			background-color: white;
			position: absolute;
			top: 25%;
			border-radius: 30rpx;
			text-align: center;
			line-height: 10vh;
			margin-left: 5%;
			font-size: 2vh;
		}
		.midContent{
			width: 90%;
			padding-top:2vh;
			height: 57vh;
			margin-top: 6vh;
			overflow-x: auto;
			background: white;
			border-radius: 30rpx;
			margin-left: 5%;
			.date{
				color: gray;
				font-size: 2vh;
				margin: 2vh;
			}
		}
		.bottomBtn{
			width: 100%;
			height: 5vh;
			background-color: white;
			position: absolute;
			bottom: 0;
			display:flex;
			flex-wrap:wrap;
			display: -webkit-flex; /* Safari */
			text{
				font-size: 2vh;
			}
			.leftBtn,.midBtn,.rightBtn{
				display: inline;
				width: 33.3%;
				height: 5vh;
				text-align: center;
				line-height: 5vh;
				
			}
			
		}
	}
		
		
	
</style>
